<script setup lang='ts'>
defineOptions({ name: 'AppSportsPageFavEmpty' })

const { isLogin } = storeToRefs(useAppStore())
</script>

<template>
  <div class="flex px-[8px] pt-[90px] pb-[50px] flex-col items-center">
    <div
      class="flex pt-[8px] pb-[8px] pl-[10px] box-content max-w-[350px] rounded-[4px] flex-col bg-[var(--color-bg-black-3)]"
      style="width: calc(100% - 56px);">
      <div class="flex relative mb-[15px] justify-between">
        <div class="brick w-[36px] h-[14px]"></div>
        <div class="brick w-[65px] h-[14px] mr-[75px]"></div>
        <div class="absolute top-[-36px] right-[-20px]">
          <BaseIcon style="--tg-base-icon-color:#FFBE3E;" name="spt-fav2" class="text-[85px]" />
        </div>
      </div>
      <div class="mr-[12px]">
        <div class="w-[171px] h-[14px] brick mb-[12px]"></div>
        <div class="flex items-center mb-[10px] justify-between">
          <div class="flex items-center">
            <div class="w-[22px] h-[22px] mr-[7px] brick"></div>
            <div class="w-[204px] h-[14px] brick"></div>
          </div>
          <div class="w-[15px] h-[22px] brick"></div>
        </div>
        <div class="flex items-center mb-[10px] justify-between">
          <div class="flex items-center">
            <div class="w-[22px] h-[22px] mr-[7px] brick"></div>
            <div class="w-[147px] h-[14px] brick"></div>
          </div>
          <div class="w-[15px] h-[22px] brick"></div>
        </div>
      </div>
      <div class="flex overflow-hidden">
        <div v-for="i in 3" class="flex pt-[7px] pr-[6px] items-center flex-col">
          <div class="flex">
            <div class="box"></div>
            <div class="box"></div>
            <div class="box"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="des">
      <span v-if="!isLogin">{{ $t('spt_need_login_to_check_fav_list') }}</span>
      <span v-else>
        <span>{{ $t('spt_your_fav_list_is_empty') }}</span><br />
        <span class="flex items-center">{{ $t('spt_click_to_add_fav') }}
          <BaseIcon name="uni-fav" class="text-[24px] ml-[8px]" />
        </span>
      </span>
    </div>

    <AppSportsBaseButton v-if="!isLogin" class="w-[56.39%]" style="--bc-sports-base-button-height:32px;"
      @click="i18nNavigateTo('/login/signin')">
      {{ $t('signin') }}
    </AppSportsBaseButton>
    <AppSportsBaseButton v-else class="w-[56.39%]" style="--bc-sports-base-button-height:32px;"
      @click="i18nNavigateTo('/sports?bt-path=%2F')">
      {{ $t('spt_go_home_page') }}
    </AppSportsBaseButton>
  </div>
</template>

<style lang='scss' scoped>
.des {
  color: var(--color-text-white-0);
  opacity: 0.5;
  padding: 0 8px;
  font-size: 16px;
  max-width: 380px;
  margin-top: 40px;
  text-align: center;
  line-height: 28px;
  margin-bottom: 40px;
}

.brick {
  border-radius: 4px;
  background-color: var(--color-bg-black-5);
}

.box {
  width: 51px;
  height: 48px;
  display: flex;
  padding: 8px 0;
  box-sizing: border-box;
  align-items: center;
  margin-right: 2px;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--color-bg-black-5);

  &:first-of-type {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
  }

  &:last-of-type {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
  }
}
</style>
